<template>
  <div style="overflow: auto; margin-top: 60px">
    <div class="item" v-for="item in 10" :key="item">{{ item }}sdfsd</div>
    <div class="item" v-for="item in 10" :key="item">{{ item }}sdfsd</div>
    <div
      style="
        padding: 10px 100px;
        margin: 0 auto;
        background: #f00;
        overflow: hidden;
      "
    >
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <h1 class="headline load-hidden" style="text-align: center">
            Widget Inc.
          </h1>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <h1 class="headline2 load-hidden" style="text-align: center">
            Widget Inc.
          </h1>
        </el-col>
      </el-row>
    </div>

    <div class="item" v-for="item in 30" :key="item">{{ item }}sdfsd</div>
    <p class="tagline">
      The perfect widgets.
      <span class="punchline">Forever.</span>
    </p>
  </div>
</template>

<script setup>
import ScrollReveal from "scrollreveal";

onMounted(() => {
  ScrollReveal({
    delay: 0,
    distance: "0px",
    duration: 500,
    // easing: "cubic-bezier(0.5, 0, 0, 1)",
    easing: "linear",
    interval: 0,
    opacity: 0,
    origin: "left",
    rotate: {
      x: 0,
      y: 0,
      z: 0,
    },
    scale: 1,
    cleanup: false,
    container: document.documentElement,
    desktop: true,
    mobile: true,
    reset: true,
    useDelay: "always",
    viewFactor: 0.0,
    viewOffset: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
    afterReset: function (el) {
      console.log(el);
    },
    afterReveal: function (el) {},
    beforeReset: function (el) {},
    beforeReveal: function (el) {
      console.log(el, "beforeReveal");
    },
  }).reveal(".headline", {
    origin: "left",
    viewFactor: 0.5,
    distance: "300px",
  });
  ScrollReveal().reveal(".tagline", { delay: 500 });
  ScrollReveal().reveal(".headline2", {
    origin: "right",
    viewFactor: 0.5,
    distance: "150px",
  });
});
</script>

<style>
.h {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #0de1ac;
  text-align: center;
}
.item {
  width: 100%;
  height: 60px;
  text-align: center;
  /* background-color: lightgreen; */
  border: 1px solid #cf0808;
  border-radius: 8px;
  margin: 10px auto;
  font-size: 28px;
  flex: 1 1 0;
}
</style>
